<template>
    <div class="header_div">
        <div class="header_info">
            <div class="base_logo" @click="showMain">{{ systemName }}</div>
            <div class="top_menu">
                <template v-for="(temp,idx) in $store.state.menuList">
                    <div class="menu_image" @click="getTopMenu(temp.id)"><img :src="$store.state.fileURL + temp.showStyle"/></div>
                </template>
            </div>
			<div class="show_user">
				<el-dropdown @command="clickUserBtn">
					<div>
						<el-avatar :src="imageUrl"></el-avatar>
						<div class="show_user_name">{{ tokenUser.nickName }}</div>
					</div>
					<el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-s-custom" command="person">人员信息</el-dropdown-item>
						<el-dropdown-item icon="el-icon-key" command="password">修改密码</el-dropdown-item>
						<el-dropdown-item icon="el-icon-switch-button" command="loginOut" divided>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
            </div>
        </div>
        <!-- 修改登录用户密码 -->
        <update-password :visible.sync="showPassword"></update-password>
		<!-- 当前用户的人员信息 -->
        <person-detail :visible.sync="showDetail" :id="tokenUser.id" @refreshList="refreshUser"></person-detail>
    </div>
</template>

<script>
import PageList from "@/components/grid/pageList";
import UpdatePassword from "@/views/index/component/updatePassword";
import PersonDetail from "@/views/index/component/personDetail";
import pathData from "@/components/menu";

export default {
    name: "div-header",
    components: {PersonDetail, UpdatePassword, PageList},
    data() {
        return {
            systemName: CONFIG.systemName,
			height: 500,
			loading: false,
            showPassword: false,
            showDetail: false,
	
			tokenUser: '',
            imageUrl: '',
		};
    },
    mounted() {
        this.$nextTick(() => {
            this.height = document.body.offsetHeight - 90;
        })
        this.refreshUser();
        this.getMenuList();
    },
    methods: {
        refreshUser() {
            this.tokenUser = this.$root.getStorage("userData");
            this.imageUrl = this.$store.state.fileURL + this.tokenUser.imageUrl;
        },
        getMenuList() {
            this.$axios.post("/CHILD_SYSTEM/systemPower/getMenuList").then(res => {
                this.routerTree(res.data);
                this.$root.setStorage("menuList", res.data);
                this.$store.state.menuList = res.data;
                var menu = (res.data)[0];
                let powerId = this.$root.getStorage("topMenu");
                if (powerId != undefined && menu.id != powerId) {
                    menu = res.data.filter(item => item.id == powerId)[0];
                }
                this.$store.state.sonMenuList = menu.childList;
                this.$store.state.topName = menu.powerName;
            })
        },
        routerTree(notesArray) {
            if (notesArray && notesArray.length > 0) {
                notesArray.forEach(temp => {
                    this.$router.addRoute({
                        name: temp.powerCode,
                        path: temp.powerPath,
                        component: pathData[temp.actualPath],
                    });
                    if (temp.childList != null && temp.childList.length > 0) {
                        this.routerTree(temp.childList);
                    }
                });
            }
        },
        showMain() {
            this.$router.replace("/home");
        },
        getTopMenu(powerId) {
            let menuList = this.$store.state.menuList;
            const menu = menuList.filter(item => item.id == powerId)[0];
            let sonMenuList = menu.childList;
            this.$store.state.sonMenuList = sonMenuList;
            this.$store.state.topName = menu.powerName;
            this.$root.setStorage("topMenu", powerId);
            this.$router.replace(this.$common.getPowerPath(sonMenuList));
        },
        clickUserBtn(command) {
            if (command === "person") {
                this.showDetail = true;
            } else if (command === "password") {
                this.showPassword = true;
            } else {
                this.$axios.post("/CHILD_SYSTEM/login/loginOut").then(res => {
                    this.$root.removeStorage('authorization');
                    this.$root.removeStorage('userData');
                    this.$root.removeStorage('menuList');
                    this.$root.removeStorage('topMenu');
                    this.$router.replace('/');
                })
            }
        },
    }
}
</script>

<style lang="scss">

</style>